<script setup lang="ts">
import { ref, reactive } from 'vue'
const accountPhone = reactive({
  phonenumber: '',
  password: ''
})
const validText = ref<string>('验证码')
const getValidCodeClick = () => {
  // validText.value = '余60s'

  console.log('获取验证码')
}
</script>
<template>
  <div class="panel-phone">
    <el-form
      :model="accountPhone"
      style="max-width: 460px"
      status-icon
      label-width="60px"
    >
      <el-form-item label="手机号">
        <el-input
          size="large"
          v-model="accountPhone.phonenumber"
          class="input_phone"
        />
      </el-form-item>
      <el-form-item label="密  码" class="phone_box">
        <el-input size="large" v-model="accountPhone.password" />

        <el-button type="primary" class="valid_btn" @click="getValidCodeClick">
          {{ validText }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="less">
/deep/.el-form-item__content {
  flex-wrap: nowrap !important;
}
.panel-phone {
  .phone_box {
    display: flex;
    flex-wrap: nowrap;

    .input_phone {
    }
    .valid_btn {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      height: auto;
    }
  }
}
</style>
